import Taro, { Component, Config } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { SDBody } from 'sudao-ui'
import SDUtils from 'sudao-utils'

import './index.less'

import ArrowDownIcon from '../../../images/ic_down.png'
import {ORDER_DATA_KEY} from "../../../redux/constants";

import ArrowUpIcon from '../../../images/ic_up.png'

type PageState = {
  orderData: any
}

export default class OrderMenuDetailPage extends Component<{}, PageState> {

  config: Config = {
    navigationBarTitleText: '商品清单'
  }

  componentDidMount () {
    let orderData = Taro.getStorageSync(ORDER_DATA_KEY) || {}
    Taro.removeStorageSync(ORDER_DATA_KEY)
    orderData.itmes.productViewVo = ((orderData.itmes || {}).productViewVo || []).map(item => {
      let skuList = item.skuViewVo || []
      item.isOpen = true
      skuList = skuList.map(innerItem => {
        let nameJson = JSON.parse(innerItem.name || '[]')
        let skuName = (nameJson.map(specItem => specItem.attrValue) || []).join(' ')
        innerItem.skuName = skuName
        return innerItem
      })

      item.skuViewVo = skuList
      return item
    })
    this.setState({
      orderData: orderData
    })
  }

  render () {

    const  { orderData = {} } = this.state

    return (
      <SDBody sd-class='container'>
        <View className='section-header'>
          <View className="item">商品：{orderData.productTotalQuantity}件</View>
          <View className="item">规格：{orderData.skuTotalQuantity}</View>
          <View className="item">总数：{orderData.totalQuantity}</View>
          <View className="item">总计：{SDUtils.formatPrice(`${orderData.finalTotalAmount}`)}</View>
        </View>
        <View className="cell-list">
          {
            ((orderData.itmes || {}).productViewVo || []).map((item, index) => {
              return (
                <View className="cell-item" key={index}>
                  <View className="cell-top">
                    <View className="cell-icon">
                      <Image className="img" src={item.image || ''}></Image>
                    </View>
                    <View className="cell-right">
                      <View className="cell-title">{item.name}</View>
                      <View className="cell-price">{SDUtils.formatPrice(`${item.amount || 0}`)}</View>
                      <View className="cell-rb">
                        <View className="cell-rb_item">
                          <View className="title">规格:</View>
                          <View className="sub-title">{item.skuCount}</View>
                        </View>
                        <View className="cell-rb_item">
                          <View className="title">总数:</View>
                          <View className="sub-title">{item.buyCount}</View>
                        </View>
                      </View>
                    </View>
                    <View className="arrow" onClick={this.switchOpenState.bind(this, index)}>
                      <Image className="icon" src={item.isOpen ? ArrowUpIcon : ArrowDownIcon}></Image>
                    </View>
                  </View>
                  {
                    item.isOpen ? (
                      <View className="inner-list">
                        {
                          item.skuViewVo.map((innerItem, innerIndex) => {
                            return (
                              <View className="inner-item border-top_1px" key={innerIndex}>
                                <View className="ii_left">{innerItem.skuName}</View>
                                <View className="ii_right">{SDUtils.formatPrice(`${innerItem.amount}`)} x {innerItem.count}</View>
                              </View>
                            )
                          })
                        }
                      </View>
                    ) : null
                  }
                </View>
              )
            })
          }
        </View>
      </SDBody>
    )
  }

  switchOpenState = (index: number) => {
    let { orderData } = this.state
    let productViewVo = ((orderData || {}).itmes || {}).productViewVo || []
    if (index >= productViewVo.length) {
      return
    }
    productViewVo[index].isOpen = !productViewVo[index].isOpen
    this.setState({
      orderData: orderData
    })

  }
}
